<template>
  <div>
    <van-card
      v-for="item in newslist"
      :title="item.title"
      :key="item.id"
      :thumb="item.img_url"
      @click="comment(item.id)"
    >
      <template #bottom>
        <span>{{ item.add_time }}</span>
        <span>点击了{{ item.click }}次</span>
      </template>
    </van-card>
  </div>
</template>

<script>
export default {
  name: 'newsList',
  data() {
    return {
      newslist: [],

    }
  },
  created() {
    this.$store.commit('changTiltle', '新闻列表')
    this.getnewslist()
  },
  beforeDestroy() {
    this.$store.commit('changTiltle', '首页');
  },
  methods: {
    async getnewslist() {
      const res = await this.$http.getNewsList();
      this.newslist = res.message;
      console.log(this.newslist);
    },
    async comment(id) {
      const res = await this.$http.getCommentNew(id)
      console.log(res);
    }
  },
}

</script>
<style lang='scss'>
.van-card__title {
  display: block; /*内联对象需加*/
  word-break: keep-all; /* 换行标准 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
.van-card__bottom {
  display: flex;
  justify-content: space-between;
  span:first-of-type {
    color: red;
    font-size: 0.32rem;
  }
  span:last-of-type {
    color: rgba(0, 0, 0, 0.4);
  }
}
</style>